import React from "react";
import styles from '@/assets/css/order_info.module.css';

const OrderInfo = () => {
    let [guest, SetGuest] = React.useState([
        {
            gender_text: "女",
            id: 52,
            mobile: "13512644556",
            nickname: "小明"
        },
        {
            gender_text: "男",
            id: 55,
            mobile: "13512644557",
            nickname: "张三"
        }
    ])

    // 评分
    let rate = 5

    const CommentView = () =>
    {
        if(rate > 0)
        {
            return(
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>评价信息：</div>
                    <div className={styles.comment}>
                        <React.UI.Rate value={5} readOnly />

                        <React.UI.Divider
                            style={{
                                color: '#1677ff',
                                borderColor: '#1677ff',
                                borderStyle: 'dashed',
                            }}
                        ></React.UI.Divider>

                        <React.UI.TextArea className='textarea' placeholder="请输入评论内容" defaultValue="非常好" readOnly />
                    </div>
                </div>
            )
        } 
        else 
        {
            return (<></>)
        }
    }

    return (
        <>
            <div className={styles.order_info}>
                <div className={styles.info_content}>
                    <div className={styles.content_title}>订单信息：</div>
                    <div className={styles.content_item}>
                        <p>入住时间</p>
                        <div>2024-03-21 星期四 - 2024-03-22 星期五</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>入住天数</p>
                        <div>共 10 晚</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>订单价格</p>
                        <div className={styles.content_price}>￥180.00</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>房间单价</p>
                        <div className={styles.content_price}>￥80.00</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>支付方式</p>
                        <div>支付宝</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>入住人数</p>
                        <div>4 人</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>订单备注</p>
                        <div>要求干净，不要有噪声</div>
                    </div>
                </div>
                {/* 房间信息 */}
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>房屋信息：</div>
                    <div className={styles.detail}>
                        <div className={styles.thumb}>
                            <img src={require("@/assets/images/hotel1.jpg")} alt="" />
                        </div>
                        <div className={styles.right}>
                            <p>普通标间</p>
                            <div className={styles.tips}>
                                <React.UI.Tag color='primary'>一室一厅</React.UI.Tag>
                                <React.UI.Tag color='primary'>15.00㎡</React.UI.Tag>
                                <React.UI.Tag color='primary'>宜住2人</React.UI.Tag>
                            </div>
                        </div>
                    </div>
                </div>

                {/* 入住信息 */}
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>住客信息：</div>
                    <div className={styles.detail}>
                        <React.UI.List className={styles.list}>
                            {guest.map((item: any) => (
                                <React.UI.List.Item
                                    key={item.nickname}
                                    description={`手机号码：${item.mobile}`}
                                >
                                    {item.nickname}({item.gender_text})
                                </React.UI.List.Item>
                            ))}
                        </React.UI.List>
                    </div>
                </div>

                {/* 评价信息 */} 
                <CommentView/>
            </div>
        </>
    )
}

export default OrderInfo;
